<template>
  <el-container style="height: 100vh;width: 100vw">
    <el-aside :style="{ width: isCollapse ? '64px' : '200px' }" class="smooth-aside">
      <layoutAside :isCollapse.sync="isCollapse"></layoutAside>
    </el-aside>

    <el-container>
      <el-header>
        <layoutHeader :isCollapse.sync="isCollapse"></layoutHeader>
      </el-header>
      <el-main>
        <layoutMain></layoutMain>
      </el-main>
    </el-container>
  </el-container>

</template>
<script>
import layoutAside from "@/components/layout/asider/layoutAside.vue";
import layoutHeader from "@/components/layout/header/layoutHeader.vue";
import layoutMain from "@/components/layout/main/layoutMain.vue";

export default {
  name: "home",
  data() {
    return {
      isCollapse: false,
    }
  },
  methods: {},
  components: {
    layoutAside,
    layoutHeader,
    layoutMain
  }
}
</script>
<style scoped lang="less">

</style>

<style scoped>
.smooth-aside {
  /*
    cubic-bezier(0.4, 0, 0.2, 1) Material Design 标准曲线
    will-change: width; 提示浏览器提前优化
    overflow: hidden !important; 防止内容溢出导致抖动
 */
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  overflow: hidden !important;
}


.el-header, .el-footer {
  background-color: #B3C0D1;
}

:deep(.el-header) {
  padding: 0;
  height: 90px !important;
  background-color: white;
}

:deep(.el-aside) {
  border-right: 1px solid #B3C0D1;
}

:deep(.el-main) {
  background-color: #F6F6F6;
  padding: 20px;
}
</style>